<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="6" :lg="6" v-for="(infor, i) in inforCardData" :key="`infor-${i}`"
             style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="pieData" text="发布来源"/>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar style="height: 300px;" :value="barData" text="每周发布统计"/>
        </Card>
      </i-col>
    </Row>
    <Row>
      <Card shadow>
        <example style="height: 310px;"/>
      </Card>
    </Row>
  </div>
</template>

<script>
  import InforCard from '_c/info-card'
  import CountTo from '_c/count-to'
  import {ChartPie, ChartBar} from '_c/charts'
  import Example from './example.vue'

  export default {
    name: 'home',
    components: {
      InforCard,
      CountTo,
      ChartPie,
      ChartBar,
      Example
    },
    data() {
      return {
        inforCardData: [
          {title: '用户数', icon: 'md-person-add', count: 10, color: '#2d8cf0'},
          {title: '项目数', icon: 'md-share', count: 108, color: '#ed3f14'},
          {title: '发布数', icon: 'ios-send', count: 50, color: '#19be6b'},
          {title: '部门数', icon: 'md-home', count: 10, color: '#ff9900'},
        ],
        pieData: [
          {value: 10, name: 'iot事业部'},
          {value: 20, name: '大数据中心'},
          {value: 30, name: '企小店'},
          {value: 12, name: '独立事业部'},
          {value: 10, name: '订单中心'}
        ],
        barData: {
          Mon: 0,
          Tue: 31,
          Wed: 3,
          Thu: 30,
          Fri: 5,
          Sat: 2,
          Sun: 1
        }
      }
    },
    mounted() {
      //
    }
  }
</script>

<style lang="less">
  .count-style {
    font-size: 50px;
  }
</style>
